const path = require('path')
const MiniCssPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

const browserSync = require('browser-sync').create()

const outputPath = path.resolve(__dirname, 'public/static/admin/js')

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'public/static/admin/es6/app.js')
    },
    output: {
        path: outputPath
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    'babel-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssPlugin.loader,
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            }
        ],
    },
    resolve: {
        extensions: [".js", ".json", ".jsx", ".css"],
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssPlugin({
            filename: '../css/app.css'
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                outputPath
            ]
        })
    ],
    stats: {
        assets: false,
        hash: false,
        errors: false,
        errorDetails: false,
    },
    profile: false,
}
browserSync.init({
    proxy: 'http://bd.localhost',
    injectChanges: false,
    files: [
        './application/**/*.php',
        './application/**/*.twig'
    ],
    open: false
})
